import {AbstractMenuButton} from "../AbstractMenuButton.ts";
import tippy from "tippy.js";


const emojis = ['😀','😃','😄','😁','😆','😅','🤣','😂','🙂','🙃','😉','😊','😇','🥰','😍','🤩','😘','😗','😚','😙','🥲','😋','😛','😜','🤪','😝'
    ,'🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😶‍🌫','😏','😒','🙄','😬','😮‍💨','🤥','😌','😔','😪','🤤','😴','😷'
    ,'🤒','🤕','🤢','🤮','🤧','🥵','🥶','🥴','😵','😵‍💫','🤯','🤠','🥳','🥸','😎','🤓','🧐','😕','😟','🙁','😮','😲','😳'
    ,'🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺'
    ,'👻','👽','👾','🤖','😺','😸','😹','😻','😼','😽','🙀','😿','😾','🙈','🙉','🙊','💌','💘','💝','💖','💗','💓','💞','💕','💟','❣️','💔'
    ,'💋','💯','💢','💥','💫','💦','💨','💤'];
export class Emoji extends AbstractMenuButton {
    constructor() {
        super();
        const template = `
        <div>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM8 13H16C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13ZM8 11C7.17157 11 6.5 10.3284 6.5 9.5C6.5 8.67157 7.17157 8 8 8C8.82843 8 9.5 8.67157 9.5 9.5C9.5 10.3284 8.82843 11 8 11ZM16 11C15.1716 11 14.5 10.3284 14.5 9.5C14.5 8.67157 15.1716 8 16 8C16.8284 8 17.5 8.67157 17.5 9.5C17.5 10.3284 16.8284 11 16 11Z"></path></svg>
        </div>
        `;
        this.template = template;
    }


    connectedCallback() {
        super.connectedCallback();

        tippy(this.querySelector("svg")!, {
            content: this.createMenuElement(),
            appendTo: this.closest(".aie-container")!,
            placement: 'bottom',
            trigger: 'click',
            interactive: true,
            arrow: false,
        })
    }


    createMenuElement() {
        const div = document.createElement("div");
        div.style.height = "220px"
        div.style.width = "400px"
        div.classList.add("aie-dropdown-container")
        div.innerHTML = `
        <div style="margin: 5px">
            <div class="emoji-cells">
            ${emojis.map((emoji) => {
                return `<div  class="emoji-cell">${emoji}</div>`;
        }).join('')}
            </div>
        </div>
        `;

        div.querySelector(".emoji-cells")!.addEventListener("click",(e)=>{
            const target:HTMLDivElement = (e.target as any).closest('.emoji-cell');
            if (target){
                this.editor?.commands.insertContent(target.innerHTML)
            }
        });

        return div;
    }
}


